<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dify服务器列表</title>
    <!-- 引入最新版本的jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Bootstrap图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .server-status-0 {
            color: #6c757d; /* 未使用 - 灰色 */
        }
        .server-status-1 {
            color: #28a745; /* 使用中 - 绿色 */
        }
        .server-status-2 {
            color: #dc3545; /* 已删除 - 红色 */
        }
        .action-buttons {
            white-space: nowrap;
        }
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        .message {
            margin: 15px 0;
            padding: 10px;
            border-radius: 3px;
            display: none;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .user-info {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>Dify服务器列表</h2>
            <div>
                <button id="add-server-btn" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> 添加服务器
                </button>
                <button id="logout-btn" class="btn btn-outline-danger">
                    <i class="bi bi-box-arrow-right"></i> 退出登录
                </button>
            </div>
        </div>
        
        <div id="user-info" class="user-info">
            正在加载用户信息...
        </div>
        
        <div id="message-success" class="message success"></div>
        <div id="message-error" class="message error"></div>
        
        <div class="loading">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p>加载中，请稍候...</p>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>IP地址</th>
                        <th>端口</th>
                        <th>创建时间</th>
                        <th>过期时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="server-list">
                    <!-- 服务器列表将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        
        <!-- 分页控件 -->
        <div id="pagination" class="mt-3">
            <!-- 分页将通过JavaScript动态加载 -->
        </div>
    </div>
    
    <!-- 添加服务器的模态框 -->
    <div class="modal fade" id="add-server-modal" tabindex="-1" aria-labelledby="add-server-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add-server-modal-label">添加Dify服务器</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-server-form">
                        <div class="mb-3">
                            <label for="ip-address" class="form-label">IP地址</label>
                            <input type="text" class="form-control" id="ip-address" required>
                        </div>
                        <div class="mb-3">
                            <label for="port" class="form-label">端口</label>
                            <input type="number" class="form-control" id="port" required>
                        </div>
                        <div class="mb-3">
                            <label for="expired-time" class="form-label">过期时间</label>
                            <input type="datetime-local" class="form-control" id="expired-time">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submit-add-server">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();
            
            // 加载用户信息
            loadUserInfo();
            
            // 加载服务器列表
            loadServerList();
            
            // 添加服务器按钮点击事件
            $('#add-server-btn').on('click', function() {
                var addServerModal = new bootstrap.Modal(document.getElementById('add-server-modal'));
                addServerModal.show();
            });
            
            // 提交添加服务器表单
            $('#submit-add-server').on('click', function() {
                // 获取表单数据
                var ipAddress = $('#ip-address').val();
                var port = $('#port').val();
                var expiredTime = $('#expired-time').val();
                
                // 验证表单
                if (!ipAddress || !port) {
                    showError('IP地址和端口不能为空');
                    return;
                }
                
                // 发送AJAX请求
                $.ajax({
                    url: '/dify_server/add',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        ip_address: ipAddress,
                        port: port,
                        expired_time: expiredTime
                    },
                    success: function(response) {
                        if (response.code === 1) {
                            // 添加成功
                            showSuccess(response.msg || '添加服务器成功');
                            
                            // 关闭模态框
                            var addServerModal = bootstrap.Modal.getInstance(document.getElementById('add-server-modal'));
                            addServerModal.hide();
                            
                            // 重新加载服务器列表
                            loadServerList();
                            
                            // 清空表单
                            $('#add-server-form')[0].reset();
                        } else {
                            // 添加失败
                            showError(response.msg || '添加服务器失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        showError('请求失败，请稍后再试');
                        console.error(xhr, status, error);
                    }
                });
            });
            
            // 退出登录按钮点击事件
            $('#logout-btn').on('click', function() {
                $.ajax({
                    url: '/user/logout',
                    type: 'POST',
                    dataType: 'json',
                    success: function(response) {
                        if (response.code === 1) {
                            // 退出成功
                            showSuccess(response.msg || '退出登录成功');
                            
                            // 延迟跳转到登录页面
                            setTimeout(function() {
                                window.location.href = '/user/login_page';
                            }, 1500);
                        } else {
                            // 退出失败
                            showError(response.msg || '退出登录失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        showError('请求失败，请稍后再试');
                        console.error(xhr, status, error);
                    }
                });
            });
            
            // 删除服务器事件委托
            $(document).on('click', '.delete-server-btn', function() {
                var serverId = $(this).data('id');
                
                if (confirm('确定要删除这个服务器吗？')) {
                    $.ajax({
                        url: '/dify_server/del',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: serverId
                        },
                        success: function(response) {
                            if (response.code === 1) {
                                // 删除成功
                                showSuccess(response.msg || '删除服务器成功');
                                
                                // 重新加载服务器列表
                                loadServerList();
                            } else {
                                // 删除失败
                                showError(response.msg || '删除服务器失败');
                            }
                        },
                        error: function(xhr, status, error) {
                            showError('请求失败，请稍后再试');
                            console.error(xhr, status, error);
                        }
                    });
                }
            });
            
            // 检查服务器状态事件委托
            $(document).on('click', '.check-status-btn', function() {
                var serverId = $(this).data('id');
                var button = $(this);
                
                // 禁用按钮并显示加载状态
                button.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 检查中...');
                
                $.ajax({
                    url: '/dify_server/checkStatus',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        id: serverId
                    },
                    success: function(response) {
                        if (response.code === 1) {
                            // 检查成功
                            var status = response.data.status;
                            showSuccess('服务器状态: ' + status);
                            
                            // 更新按钮状态
                            var statusClass = status === '在线' ? 'btn-success' : 'btn-warning';
                            button.removeClass('btn-info btn-success btn-warning').addClass(statusClass);
                            button.html('<i class="bi bi-arrow-repeat"></i> ' + status);
                            
                            // 3秒后恢复按钮状态
                            setTimeout(function() {
                                button.removeClass('btn-success btn-warning').addClass('btn-info');
                                button.html('<i class="bi bi-arrow-repeat"></i> 检查状态');
                                button.prop('disabled', false);
                            }, 3000);
                        } else {
                            // 检查失败
                            showError(response.msg || '检查服务器状态失败');
                            
                            // 恢复按钮状态
                            button.prop('disabled', false).html('<i class="bi bi-arrow-repeat"></i> 检查状态');
                        }
                    },
                    error: function(xhr, status, error) {
                        showError('请求失败，请稍后再试');
                        console.error(xhr, status, error);
                        
                        // 恢复按钮状态
                        button.prop('disabled', false).html('<i class="bi bi-arrow-repeat"></i> 检查状态');
                    }
                });
            });
            
            // 当前页码和每页数量
            var currentPage = 1;
            var pageSize = 10;
            var totalPages = 1;
            
            // 加载服务器列表
            function loadServerList(page) {
                // 设置当前页码
                page = page || 1;
                currentPage = page;
                
                // 显示加载中
                $('.loading').show();
                
                $.ajax({
                    url: '/dify_server/getList',
                    type: 'GET',
                    data: {
                        page: page,
                        limit: pageSize
                    },
                    dataType: 'json',
                    success: function(response) {
                        // 隐藏加载中
                        $('.loading').hide();
                        
                        if (response.code === 1) {
                            // 加载成功
                            var data = response.data || {};
                            var serverList = data.list || [];
                            
                            // 渲染服务器列表
                            renderServerList(serverList);
                            
                            // 渲染分页
                            renderPagination(data);
                        } else {
                            // 加载失败
                            showError(response.msg || '加载服务器列表失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        // 隐藏加载中
                        $('.loading').hide();
                        
                        showError('请求失败，请稍后再试');
                        console.error(xhr, status, error);
                    }
                });
            }
            
            // 渲染分页控件
            function renderPagination(data) {
                var pagination = $('#pagination');
                pagination.empty();
                
                // 获取分页数据
                totalPages = data.last_page || 1;
                
                // 如果只有一页，不显示分页控件
                if (totalPages <= 1) {
                    return;
                }
                
                var html = '<nav aria-label="服务器列表分页"><ul class="pagination justify-content-center">';
                
                // 上一页按钮
                if (currentPage > 1) {
                    html += '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="' + (currentPage - 1) + '">上一页</a></li>';
                } else {
                    html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">上一页</a></li>';
                }
                
                // 页码按钮
                var startPage = Math.max(1, currentPage - 2);
                var endPage = Math.min(totalPages, startPage + 4);
                
                if (endPage - startPage < 4 && totalPages > 5) {
                    startPage = Math.max(1, endPage - 4);
                }
                
                for (var i = startPage; i <= endPage; i++) {
                    if (i === currentPage) {
                        html += '<li class="page-item active"><a class="page-link" href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        html += '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="' + i + '">' + i + '</a></li>';
                    }
                }
                
                // 下一页按钮
                if (currentPage < totalPages) {
                    html += '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="' + (currentPage + 1) + '">下一页</a></li>';
                } else {
                    html += '<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">下一页</a></li>';
                }
                
                html += '</ul></nav>';
                pagination.html(html);
                
                // 绑定分页点击事件
                $('#pagination .page-link').not('.disabled').on('click', function() {
                    var page = $(this).data('page');
                    if (page) {
                        loadServerList(page);
                    }
                });
            }
            
            // 渲染服务器列表
            function renderServerList(serverList) {
                var html = '';
                
                if (!serverList || serverList.length === 0) {
                    html = '<tr><td colspan="7" class="text-center">暂无服务器数据</td></tr>';
                } else {
                    for (var i = 0; i < serverList.length; i++) {
                        var server = serverList[i];
                        var status = server.status || getStatusText(server.is_use);
                        var statusClass = getStatusClass(status);
                        
                        html += '<tr>';
                        html += '<td>' + server.id + '</td>';
                        html += '<td>' + server.ip_address + '</td>';
                        html += '<td>' + server.port + '</td>';
                        html += '<td>' + formatDateTime(server.create_time) + '</td>';
                        html += '<td>' + formatDateTime(server.expired_time) + '</td>';
                        html += '<td><span class="' + statusClass + '">' + status + '</span></td>';
                        html += '<td class="action-buttons">';
                        
                        if (server.is_use !== 2) { // 如果不是已删除状态
                            html += '<button class="btn btn-sm btn-info check-status-btn me-1" data-id="' + server.id + '"><i class="bi bi-arrow-repeat"></i> 检查状态</button>';
                            html += '<button class="btn btn-sm btn-danger delete-server-btn" data-id="' + server.id + '"><i class="bi bi-trash"></i> 删除</button>';
                        }
                        
                        html += '</td>';
                        html += '</tr>';
                    }
                }
                
                $('#server-list').html(html);
            }
            
            // 获取状态对应的CSS类
            function getStatusClass(status) {
                switch (status) {
                    case '使用中':
                        return 'server-status-1';
                    case '在线':
                        return 'text-success';
                    case '离线':
                        return 'text-danger';
                    case '已过期':
                        return 'text-warning';
                    case '已删除':
                        return 'server-status-2';
                    case '未使用':
                        return 'server-status-0';
                    default:
                        return '';
                }
            }
            
            // 获取状态文本
            function getStatusText(status) {
                switch (parseInt(status)) {
                    case 0:
                        return '未使用';
                    case 1:
                        return '使用中';
                    case 2:
                        return '已删除';
                    default:
                        return '未知';
                }
            }
            
            // 格式化日期时间
            function formatDateTime(dateTime) {
                if (!dateTime || dateTime === '无' || dateTime === '永不过期') return dateTime;
                
                // 尝试直接解析日期字符串
                var date = new Date(dateTime);
                
                // 如果是有效日期
                if (!isNaN(date.getTime())) {
                    return date.getFullYear() + '-' + 
                           padZero(date.getMonth() + 1) + '-' + 
                           padZero(date.getDate()) + ' ' + 
                           padZero(date.getHours()) + ':' + 
                           padZero(date.getMinutes()) + ':' + 
                           padZero(date.getSeconds());
                }
                
                // 如果是时间戳（秒）
                if (!isNaN(dateTime) && dateTime > 1000000000) {
                    date = new Date(dateTime * 1000);
                    return date.getFullYear() + '-' + 
                           padZero(date.getMonth() + 1) + '-' + 
                           padZero(date.getDate()) + ' ' + 
                           padZero(date.getHours()) + ':' + 
                           padZero(date.getMinutes()) + ':' + 
                           padZero(date.getSeconds());
                }
                
                // 如果无法解析，则原样返回
                return dateTime;
            }
            
            // 数字补零
            function padZero(num) {
                return num < 10 ? '0' + num : num;
            }
            
            // 加载用户信息
            function loadUserInfo() {
                $.ajax({
                    url: '/user/getUserInfo',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.code === 1) {
                            // 加载成功
                            var userInfo = response.data || {};
                            var html = '<strong>欢迎，' + userInfo.username + '</strong>';
                            $('#user-info').html(html);
                        } else {
                            // 加载失败
                            $('#user-info').html('<span class="text-danger">获取用户信息失败</span>');
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#user-info').html('<span class="text-danger">获取用户信息失败</span>');
                        console.error(xhr, status, error);
                    }
                });
            }
            
            // 检查登录状态
            function checkLoginStatus() {
                $.ajax({
                    url: '/user/checkLogin',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.code !== 1) {
                            // 未登录，跳转到登录页面
                            window.location.href = '/user/login_page';
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr, status, error);
                        // 请求失败，也跳转到登录页面
                        window.location.href = '/user/login_page';
                    }
                });
            }
            
            // 显示成功消息
            function showSuccess(message) {
                $('#message-success').text(message).fadeIn();
                setTimeout(function() {
                    $('#message-success').fadeOut();
                }, 3000);
            }
            
            // 显示错误消息
            function showError(message) {
                $('#message-error').text(message).fadeIn();
                setTimeout(function() {
                    $('#message-error').fadeOut();
                }, 3000);
            }
        });
    </script>
</body>
</html>